<template>
    <component
        :is="_elTag"
        class="el-radio-group"
        role="radiogroup"
   >
        <slot></slot>
    </component>
</template>

<script>
    export default {
        name: 'LeRadioGroup',
        props: {
            value: {}
        },
        created() {
            this.$on('handleChange', val => {
                this.$emit('change',val)
            })
        },
        computed: {
            _elTag() {
                let tag = (this.$vnode.data || {}).tag;
                if (!tag || tag === 'component') tag = 'div';
                return tag;
            },
        },
        mounted() {
            // 当radioGroup没有默认选项时，第一个可以选中Tab导航
            const radios = this.$el.querySelectorAll('[type=radio]');
            const firstLabel = this.$el.querySelectorAll('[role=radio]')[0];
            if (![].some.call(radios, radio => radio.checked) && firstLabel) {
                firstLabel.tabIndex = 0;
        }
    },
    }
</script>

<style lang="scss" scoped>

</style>